<template>
  <div class="state-custom">
    <el-card
      class="aui-card--fill"
      shadow="never">
      <div
        class="head"
        slot="header">
        <h2>自定义查询</h2>
      </div>

      <el-form :inline="true">
        <!--IP-->
        <!--            查询类型-->
        <!--            开始时间日期，结束时间日期-->

        <el-form-item :label="$t('monitor.ip')">
          <el-select
            :placeholder="$t('monitor.ip')"
            @change="reload"
            clearable
            filterable
            v-model="dataForm.ip"
          >
            <el-option
              :key="item.id"
              :label="item.label"
              :value="item.value"
              v-for="item in ipList"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('state.timeUnit')">
          <el-select
            :placeholder="$t('state.timeUnit')"
            @change="reload"
            v-model="dataForm.timeUnit"
          >
            <el-option
              :key="item.id"
              :label="item.label"
              :value="item.value"
              v-for="item in timeUnitTypes"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('oss.type')">
          <el-select
            :placeholder="$t('oss.type')"
            @change="reload"
            v-model="queryType"
          >
            <el-option
              :key="item.id"
              :label="item.label"
              :value="item.value"
              v-for="item in monitorTypes"
            />
          </el-select>
        </el-form-item>
        <!--        Minute/Hour Type date and time select -->
        <el-form-item :label="$t('datePicker.startTime')">
          <el-date-picker
            :picker-options="timePickOptions"
            :placeholder="$t('datePicker.startTime')"
            @change="reload"
            align="right"
            type="datetime"
            v-model="dataForm.startDate"
          />
        </el-form-item>
        <el-form-item :label="$t('datePicker.endTime')">
          <el-date-picker
            :picker-options="timePickOptions"
            :placeholder="$t('datePicker.endTime')"
            @change="reload"
            align="right"
            type="datetime"
            v-model="dataForm.endDate"
          />
        </el-form-item>
      </el-form>
      <!--        Line charts && table-->

      <state-custom-result
        :data-list="dataList"
        :loading="loading"
        :type="queryType"
        :params="dataForm"
      />

      <el-pagination
        :current-page="dataForm.page"
        :page-size="dataForm.limit"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        @current-change="pageCurrentChangeHandle"
        @size-change="pageSizeChangeHandle"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </el-card>
  </div>
</template>

<script>
import {
  MACHINE_STATE_MINITOR_TIME_UNIT_TYPE,
  MACHINE_STATE_MONITOR_TYPE
} from '@/utils/constant'
import sysStateMixins from '@/mixins/sys-state/sys-state.mixins'

import StateCustomResult from './state.custom.result'

export default {
  name: 'StateCustom',
  components: {
    StateCustomResult
  },
  mixins: [sysStateMixins],
  data () {
    return {
      timePickOptions: {
        shortcuts: [
          {
            text: '现在',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date(new Date().setHours(0, 0, 0)))
            }
          },
          {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },

      timeUnitTypes: [
        {
          label: '月',
          value: MACHINE_STATE_MINITOR_TIME_UNIT_TYPE.Month.key
        },
        {
          label: '日',
          value: MACHINE_STATE_MINITOR_TIME_UNIT_TYPE.Day.key
        },
        {
          label: '小时',
          value: MACHINE_STATE_MINITOR_TIME_UNIT_TYPE.Hour.key
        },
        {
          label: '分钟',
          value: MACHINE_STATE_MINITOR_TIME_UNIT_TYPE.Minute.key
        }
      ],
      monitorTypes: [
        {
          label: 'CPU',
          value: MACHINE_STATE_MONITOR_TYPE.CPU
        },
        {
          label: '内存',
          value: MACHINE_STATE_MONITOR_TYPE.MEMORY
        },
        {
          label: '硬盘',
          value: MACHINE_STATE_MONITOR_TYPE.DISK
        },
        {
          label: '接口',
          value: MACHINE_STATE_MONITOR_TYPE.API
        }
      ]
    }
  },
  computed: {},
  beforeMount () {
    this.getIpList()

    // giving default time

    let timeValues = this.sevenDaysFormat()
    this.dataForm.limit = 100
    this.dataForm = {
      ...this.dataForm,
      ...timeValues
    }
  },
  mounted () {
    this.reload()
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.state-custom {
}
</style>
